<template>
	<text :class="['empire-tag', sizeClassName, typeClassName]" :style="styles">
		{{ text }}
	</text>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
	type: {
		// primary warn
		type: String,
		default: 'default'
	},
	size: {
		type: String,
		default: 'default'
	},
	round: {
		type: Boolean,
		default: false
	},
	backgroundColor: {
		type: String,
		default: undefined
	},
	text: {
		type: String,
		default: undefined
	}
});
const sizeClassName = computed(() => `empire-tag__${props.size}`);
const typeClassName = computed(() => `empire-tag__${props.type}`);
const styles = computed(() => {
	const defaultStyle = {};
	if (props.backgroundColor) {
		defaultStyle.backgroundColor = props.backgroundColor;
	}
	return defaultStyle;
});
</script>

<style lang="scss" scoped>
.empire-tag {
	border-radius: 4rpx;
	background-color: #e6e6e6;
}
.empire-tag__default {
	height: 64rpx;
	line-height: 64rpx;
	padding: 8rpx 24rpx;
	font-size: 24rpx;
}
.empire-tag__mini {
	height: 52rpx;
	line-height: 52rpx;
	padding: 4rpx 16rpx;
	font-size: 28rpx;
}

.empire-tag__primary {
	color: #1ba4f0;
	background-color: rgba(27, 164, 240, 0.1);
}
.empire-tag__warn {
	color: #f0ad16;
	background-color: rgba(247, 166, 12, 0.1);
}
.empire-tag__danger {
	color: #ff0000;
	background-color: rgba(253, 99, 99, 0.1);
}
.is-round {
	border-radius: 50%;
}
</style>
